<template>
  <!--2021批次  该组件根据业务内容写死，若业务调整，请更换页面或采取更好的解决方式， -->
  <div class="container">
    <div id="container"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'

export default {
  name: 'flow',
  props: {
    flowParams: {
      type: Object,
      default: () => {
        return {
          pid: "",
          status: "4",
          apply_batch: "2021",
          inside_log: "LA00536,LA00541,LA00535,LA00532"
        }
      }
    }
  },
  data () {
    return {
      chart: '',
      height: document.documentElement.clientHeight / 2,
      width: document.documentElement.clientWidth / 2,
    }
  },
  mounted () {
    // this.init()
  },

  methods: {
    close () {
      if (this.chart) {
        this.chart.destroy()
      }
    },
    async init () {
      console.log(this.flowParams)
      // 判断普通部门/保障部门/内设部门
      const res = await this.$http('verifyPower', {
        apply_batch: this.flowParams.apply_batch,
        id: this.flowParams.pid
      })

      let level = 1
      // 优先判断内设部门
      for (let i = 0; i < res.length; i++) {

        if (res[i].pow_name.indexOf('内设部门') > -1) {
          level = 2
          debugger
          this.init2(this.flowParams.status, this.flowParams.inside_log)
          return level
        }
      }
      // 其次为保障部门
      for (let i = 0; i < res.length; i++) {
        if (res[i].company_name.indexOf('沈阳市信息中心') > -1) {
          level = 2
          debugger
          this.init2(this.flowParams.status, this.flowParams.inside_log)
          return level
        } else {
          level = 1
        }
      }
      // 普通部门
      this.init1(this.flowParams.status, this.flowParams.inside_log)

    },
    init1 (status, inside_log) {

      if (!inside_log) {
        inside_log = ''
      }
      status = parseInt(status)
      if (status == 51) {
        status = 5
      } else if (status == 52) {
        status = 7
      } else if (status == 3) {
        status = 3
      } else if (status == 4) {
        status = 6
      } else if (status >= 6) {
        status = status + 1
      }
      const data = {
        nodes: [
          {
            id: '1',
            label: '项目填写中',
            value: '0'
          },
          {
            id: '2',
            label: '本单位审核',
            value: '1'
          },
          {
            id: '3',
            label: '保障部门',
            value: '2'
          },
          {
            id: '4',
            label: '基础设施部',
            value: '3',
            code: 'LA00532'
          },
          {
            id: '5',
            label: '大数据应用部',
            value: '3',
            code: 'LA00534'
          },
          {
            id: '6',
            label: '安全保障部',
            value: '3',
            code: 'LA00536'
          },
          {
            id: '7',
            label: '软件技术部',
            value: '3',
            code: 'LA00536'
          },
          {
            id: '8',
            label: '信息资源部',
            value: '3',
            code: 'LA00541'
          },
          {
            id: '9',
            label: '必要性审核',
            value: '4'
          },
          {
            id: '10',
            label: '咨询机构',
            value: '5'
          },
          {
            id: '11',
            label: '资金审核',
            value: '6'
          },
          // {
          //   id: '12',
          //   label: '财政局',
          //   value: '7'
          // }
        ],
        edges: [
          {
            source: '1',
            target: '2'
          },
          {
            source: '2',
            target: '3'
          },
          {
            source: '3',
            target: '4'
          },
          {
            source: '3',
            target: '5'
          },
          {
            source: '3',
            target: '6'
          },
          {
            source: '3',
            target: '7'
          },
          {
            source: '3',
            target: '8'
          },
          {
            source: '4',
            target: '9'
          },
          {
            source: '5',
            target: '9'
          },
          {
            source: '6',
            target: '9'
          },
          {
            source: '7',
            target: '9'
          },
          {
            source: '8',
            target: '9'
          },
          {
            source: '9',
            target: '10'
          },
          {
            source: '10',
            target: '11'
          },
          {
            source: '11',
            target: '12'
          }
        ]
      }
      // const lineDash = [15, 2, 1, 2]
      G6.registerEdge(
        'circle-running',
        {
          style: {
            lineWidth: 2,
            stroke: '#bae7ff'
          },
          afterDraw (cfg, group) {
            if (cfg.targetNode._cfg.model.value == status) {
              // 在组中获得第一个形状，这是边的路径
              const shape = group.get('children')[0]
              // 边路径的起始位置
              const startPoint = shape.getPoint(0)
              // 添加蓝色圆形
              const circle = group.addShape('circle', {
                attrs: {
                  x: startPoint.x,
                  y: startPoint.y,
                  fill: '#1890ff',
                  r: 10
                },
                name: 'circle-shape'
              })
              // 动画
              circle.animate(
                (ratio) => {
                  // 每个帧中的操作。比率的范围为0到1，表示动画的进度。返回修改的配置
                  // 根据比率获取边缘位置
                  const tmpPoint = shape.getPoint(ratio)
                  // 在这里返回修改后的配置，在这里返回x和y
                  return {
                    x: tmpPoint.x,
                    y: tmpPoint.y
                  }
                },
                {
                  repeat: true, // 是否重复执行动画
                  duration: 2000 // 执行一次的时间
                }
              )
            }
          }
          // afterDraw (cfg, group) {
          //   if (cfg.targetNode._cfg.model.name == '2') {
          //     const shape = group.get('children')[0]
          //     let index = 0
          //     // 定义动画
          //     shape.animate(
          //       () => {
          //         index++
          //         if (index > 9) {
          //           index = 0
          //         }
          //         const res = {
          //           lineDash,
          //           lineDashOffset: -index
          //         }
          //         return res
          //       },
          //       {
          //         repeat: true,
          //         duration: 3000
          //       }
          //     )
          //
          //   }
          // }
        },
        'polyline' // 扩展内置边“立方体”
      )
      const container = document.getElementById('container')
      const width = 1000
      const height = 400
      const graph = new G6.Graph({
        container: 'container', // 容器
        width,
        height,
        //  布局设置
        layout: {
          type: 'dagre', // 类型 dagre 层次布局
          rankdir: 'LR', // 方向，默认TB上到下，LB左到右
          ranksep: 80 // 水平距离
          // controlPoints: true // 是否保留布局连线的控制点
        },
        defaultNode: {
          type: 'rect',
          style: {
            width: 200,
            height: 50,
            radius: 10,
            lineWidth: 1,
            fill: '#edf5ff',
            storke: '#1890ff',
            shadowColor: '#1890ff',
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            cursor: 'move'
          },
          labelCfg: {
            style: {
              fontSize: 20,
              textAlign: 'center',
              textBaseline: 'middle',
              fontWeight: 'bold',
              cursor: 'move'
            }
          }
        },
        defaultEdge: {
          // type: 'polyline',
          type: 'circle-running',
          style: {
            lineWidth: 2,
            stroke: '#bae7ff'
          }
        },
        modes: {
          default: [
            'drag-canvas', // 移动图形
            // 'drag-node', 可以移动节点
            'zoom-canvas' // 放大 缩小
            // 'click-select' 点击
          ]
        },
        fitView: true
        // fitViewPadding: 100
      })
      if (status != 3) {
        graph.node(node => {
          if (node.value < status) {
            return {
              style: {
                fill: '#1890ff'
              }
            }
          }
          return {
            style: {
              fill: '#edf5ff',
              storke: '#2db7f5'
            }
          }
        })
      } else {
        graph.node(node => {
          if (node.value <= status && !node.code) {
            return {
              style: {
                fill: '#1890ff'
              }
            }
          }
          if (inside_log.length > 0 && inside_log.indexOf(node.code) > -1) {
            return {
              style: {
                fill: '#1890ff'
              }
            }
          }
          return {
            style: {
              fill: '#edf5ff',
              storke: '#2db7f5'
            }
          }
        })
      }

      this.chart = graph
      graph.data(data)
      graph.render()
      if (typeof window !== 'undefined') {
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
      }
    },
    init2 (status, inside_log) {
      if (!inside_log) {
        inside_log = ''
      }
      status = parseInt(status)
      if (status == 51) {
        status = 4
      } else if (status == 52) {
        status = 6
      } else if (status == 3) {
        status = 2
      } else {
        status = status + 1
      }
      const data = {
        nodes: [
          {
            id: '1',
            label: '项目填写中',
            value: '0'
          },
          {
            id: '2',
            label: '本单位审核',
            value: '1'
          },
          {
            id: '4',
            label: '基础设施部',
            value: '2',
            code: 'LA00532'
          },
          {
            id: '5',
            label: '大数据应用部',
            value: '2',
            code: 'LA00534'
          },
          {
            id: '6',
            label: '安全保障部',
            value: '2',
            code: 'LA00535'
          },
          {
            id: '7',
            label: '软件技术部',
            value: '2',
            code: 'LA00536'
          },
          {
            id: '8',
            label: '信息资源部',
            value: '2',
            code: 'LA00541'
          },
          {
            id: '9',
            label: '必要性审核',
            value: '3'
          },
          {
            id: '10',
            label: '咨询机构',
            value: '4'
          },
          {
            id: '11',
            label: '资金审核',
            value: '5'
          },
          // {
          //   id: '12',
          //   label: '财政局',
          //   value: '6'
          // }
        ],
        edges: [
          {
            source: '1',
            target: '2'
          },
          {
            source: '2',
            target: '4'
          },
          {
            source: '2',
            target: '5'
          },
          {
            source: '2',
            target: '6'
          },
          {
            source: '2',
            target: '7'
          },
          {
            source: '2',
            target: '8'
          },
          {
            source: '4',
            target: '9'
          },
          {
            source: '5',
            target: '9'
          },
          {
            source: '6',
            target: '9'
          },
          {
            source: '7',
            target: '9'
          },
          {
            source: '8',
            target: '9'
          },
          {
            source: '9',
            target: '10'
          },
          {
            source: '10',
            target: '11'
          },
          {
            source: '11',
            target: '12'
          }
        ]
      }
      G6.registerEdge(
        'circle-running',
        {
          style: {
            lineWidth: 2,
            stroke: '#bae7ff'
          },
          afterDraw (cfg, group) {
            if (cfg.targetNode._cfg.model.value == status) {
              const shape = group.get('children')[0]
              const startPoint = shape.getPoint(0)
              const circle = group.addShape('circle', {
                attrs: {
                  x: startPoint.x,
                  y: startPoint.y,
                  fill: '#1890ff',
                  r: 10
                },
                name: 'circle-shape'
              })
              // 动画
              circle.animate(
                (ratio) => {
                  const tmpPoint = shape.getPoint(ratio)
                  return {
                    x: tmpPoint.x,
                    y: tmpPoint.y
                  }
                },
                {
                  repeat: true,
                  duration: 2000
                }
              )
            }
          }
        },
        'polyline'
      )
      const container = document.getElementById('container')
      const width = 1000
      const height = 400
      const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          ranksep: 80
        },
        defaultNode: {
          type: 'rect',
          style: {
            width: 200,
            height: 50,
            radius: 10,
            lineWidth: 1,
            fill: '#edf5ff',
            storke: '#1890ff',
            shadowColor: '#1890ff',
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            cursor: 'move'
          },
          labelCfg: {
            style: {
              fontSize: 20,
              textAlign: 'center',
              textBaseline: 'middle',
              fontWeight: 'bold',
              cursor: 'move'
            }
          }
        },
        defaultEdge: {
          type: 'circle-running',
          style: {
            lineWidth: 2,
            stroke: '#bae7ff'
          }
        },
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        fitView: true
      })

      if (status != 2) {
        graph.node(node => {
          if (node.value <= status && !node.code) {
            return {
              style: {
                fill: '#1890ff'
              }
            }
          }
          if (inside_log.length > 0 && inside_log.indexOf(node.code) > -1) {
            return {
              style: {
                fill: '#1890ff'
              }
            }
          }
          return {
            style: {
              fill: '#edf5ff',
              storke: '#2db7f5'
            }
          }
        })
      } else {
        graph.node(node => {
          if (node.value < status || inside_log.indexOf(node.code) > -1) {
            return {
              style: {
                fill: '#1890ff'
              }
            }
          }
          return {
            style: {
              fill: '#edf5ff',
              storke: '#2db7f5'
            }
          }
        })
      }

      this.chart = graph
      graph.data(data)
      graph.render()

      if (typeof window !== 'undefined') {
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
      }
    },
    init3 (status) {
      status = parseInt(status)
      if (status == 51) {
        status = 3
      } else if (status == 52) {
        status = 5
      } else if (status == 4) {
        status = 4
      } else {
        status = status + 1
      }
      const data = {
        nodes: [
          {
            id: '1',
            label: '项目填写中',
            value: '0'
          },
          {
            id: '2',
            label: '本单位审核',
            value: '1'
          },
          {
            id: '8',
            label: '必要性审核',
            value: '2'
          },
          {
            id: '9',
            label: '咨询机构',
            value: '3'
          },
          {
            id: '10',
            label: '资金审核',
            value: '4'
          },
          // {
          //   id: '11',
          //   label: '财政局',
          //   value: '5'
          // }
        ],
        edges: [
          {
            source: '1',
            target: '2'
          },
          {
            source: '2',
            target: '8'
          },
          {
            source: '8',
            target: '9'
          },
          {
            source: '9',
            target: '10'
          },
          {
            source: '10',
            target: '11'
          }
        ]
      }
      G6.registerEdge(
        'circle-running',
        {
          style: {
            lineWidth: 2,
            stroke: '#bae7ff'
          },
          afterDraw (cfg, group) {
            if (cfg.targetNode._cfg.model.value == status) {
              const shape = group.get('children')[0]
              const startPoint = shape.getPoint(0)
              const circle = group.addShape('circle', {
                attrs: {
                  x: startPoint.x,
                  y: startPoint.y,
                  fill: '#1890ff',
                  r: 10
                },
                name: 'circle-shape'
              })
              // 动画
              circle.animate(
                (ratio) => {
                  const tmpPoint = shape.getPoint(ratio)
                  return {
                    x: tmpPoint.x,
                    y: tmpPoint.y
                  }
                },
                {
                  repeat: true,
                  duration: 2000
                }
              )
            }
          }
        },
        'polyline'
      )
      const container = document.getElementById('container')
      const width = 1000
      const height = 400
      const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          ranksep: 80
        },
        defaultNode: {
          type: 'rect',
          style: {
            width: 200,
            height: 50,
            radius: 10,
            lineWidth: 1,
            fill: '#edf5ff',
            storke: '#1890ff',
            shadowColor: '#1890ff',
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            cursor: 'move'
          },
          labelCfg: {
            style: {
              fontSize: 20,
              textAlign: 'center',
              textBaseline: 'middle',
              fontWeight: 'bold',
              cursor: 'move'
            }
          }
        },
        defaultEdge: {
          type: 'circle-running',
          style: {
            lineWidth: 2,
            stroke: '#bae7ff'
          }
        },
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        fitView: true
      })
      graph.node(node => {
        if (node.value < status) {
          return {
            style: {
              fill: '#1890ff'
            }
          }
        }
        return {
          style: {
            fill: '#edf5ff',
            storke: '#2db7f5'
          }
        }
      })
      this.chart = graph
      graph.data(data)
      graph.render()

      if (typeof window !== 'undefined') {
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
      }
    },
  },
}
</script>

<style scoped>
.main {
  /*width: 100%;*/
  z-index: 999;
}
</style>
